<template>
  <div>
    <Bread />
    <div
      v-loading="listLoading"
      element-loading-text="资源加载中"
      element-loading-spinner="el-icon-loading"
      class="detail-container"
    >
      <div class="item">
        <div class="left">
          <el-image fit="cover" :src="detailInfo.picture"></el-image>
        </div>

        <div class="right" style="padding: 24px 24px 10px">
          <div class="head">
            <div class="title" style="padding-bottom: 33px">
              {{ detailInfo.title }}
            </div>
          </div>

          <div class="main">
            <span class="label label-w font-18"> 所属行业: </span>
            <span class="label-v font-18">
              {{ filedDictName(detailInfo.fieldId) }}
            </span>
          </div>

          <div class="main">
            <span class="label label-w font-18"> 技术来源: </span>
            <span class="label-v font-18">
              {{ techSourceName(detailInfo.sourceId) }}
            </span>
          </div>

          <div class="main" style="padding-bottom: 14px">
            <span class="label label-w font-18"> 合作方式: </span>
            <span class="label-v font-18">
              {{ cooperationName(detailInfo.cooperationId) }}
            </span>
          </div>

          <div class="main" style="padding-bottom: 14px">
            <span class="label label-w font-18"> 成果阶段: </span>
            <span class="label-v font-18">
              {{ achStepName(detailInfo.phaseId) }}
            </span>
          </div>

          <div class="main" style="padding-bottom: 14px">
            <span class="label label-w font-18"> 成果类型: </span>
            <span class="font-18">
              {{ achTypeName(detailInfo.typeId) }}
            </span>
          </div>

          <div class="main">
            <span class="label label-w font-18"> 所在地: </span>
            <span class="font-18"> {{ detailInfo.address }} </span>
          </div>
        </div>
      </div>

      <div class="main-content">
        <div>
          <div class="content-head">成果描述</div>
          <div v-html="detailInfo.content" class="content"></div>
        </div>

        <!-- <div class="aside">
          <h5 class="relative -top-1 py-4 border-t-4 border-blue-500 px-4">
            相关推荐
          </h5>
          <ul class="px-4">
            <li
              v-for="item in recommendList"
              :key="item.id"
              class="recommend-item"
              @click="toDetail(item.id)"
            >
              <h6 class="line-1">{{ item.title }}</h6>
              <p class="pt-4 text-gray-500">{{ item.location }}</p>
            </li>
          </ul>
        </div> -->

        <div class="aside">
          <h5 class="head">
            相关推荐
            <div class="head-line"></div>
          </h5>
          <ul class="pl-4">
            <li
              v-for="item in recommendList"
              :key="item.id"
              :class="['recommend-item pr-4']"
              @click="toDetail(item.id)"
            >
              <div class="flex items-center">
                <!-- <div class="avatar-container">
                  <el-image :src="item.picture" fit="contain"></el-image>
                </div> -->
                <div class="flex-grow">
                  <div class="title ">{{ item.title }}</div>
                  <p class="sub-title">{{ filedDictName(item.fieldId) }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bread from '@/components/Bread'
import {
  getAchievementsDetail,
  getAchievementsReList,
} from '@/api/techAchievements'

export default {
  name: 'techAchievementsDetail',
  components: {
    Bread,
  },
  data() {
    return {
      nowId: '',
      listLoading: false,
      // 成果阶段
      achStepDictName: 'achievements_achievement_stage',
      achStepTypeList: [],

      // 行业类型
      positionDictName: 'user_common_field',
      positionList: [],

      // 成果类型
      achTypeDictName: 'achievements_achievement_type',
      achTypeList: [],

      // 合作方式
      cooperationDictName: 'achievements_cooperation_mode',
      cooperationList: [],

      // 技术来源
      techDictName: 'achievements_technology_source',
      techList: [],
      detailInfo: {
        id: 0,
        picture: '',
        title: '',
        fieldId: '',
        phaseId: '',
        sourceId: '',
        cooperationId: '',
        typeId: '',
        address: '',
        content: '',
      },

      // 推荐列表
      recommendList: [],
    }
  },
  watch: {
    $route(v) {
      let id = v.params.id
      this.getDetailInfo(id)
      this.getRecommendList()
    },
  },
  computed: {
    filedDictName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.positionList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        if (findItem) {
          return findItem['dictLabel'] ? findItem['dictLabel'] : '无'
        }
        return '无'
      }
    },
    achStepName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.achStepTypeList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        return findItem && findItem['dictLabel'] ? findItem['dictLabel'] : '无'
      }
    },
    achTypeName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.achTypeList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )

        return findItem && findItem['dictLabel'] ? findItem['dictLabel'] : '无'
      }
    },
    cooperationName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.cooperationList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )

        return findItem && findItem['dictLabel'] ? findItem['dictLabel'] : '无'
      }
    },
    techSourceName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.techList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )

        return findItem && findItem['dictLabel'] ? findItem['dictLabel'] : '无'
      }
    },
  },
  created() {
    this.initDictList()
    this.getDetailInfo()
    this.getRecommendList()
  },
  methods: {
    // 获取所需要的字典列表
    initDictList() {
      this.getDictList(this.achStepDictName).then((res) => {
        if (res.code == 200) {
          this.achStepTypeList = res.data
        }
      })
      this.getDictList(this.positionDictName).then((res) => {
        if (res.code == 200) {
          this.positionList = res.data
        }
      })
      this.getDictList(this.achTypeDictName).then((res) => {
        if (res.code == 200) {
          this.achTypeList = res.data
        }
      })
      this.getDictList(this.cooperationDictName).then((res) => {
        if (res.code == 200) {
          this.cooperationList = res.data
        }
      })
      this.getDictList(this.techDictName).then((res) => {
        if (res.code == 200) {
          this.techList = res.data
        }
      })
    },
    getDetailInfo(id) {
      if (!id && id !== 0) {
        id = this.$route.params.id
      }
      if (!id) {
        this.$message({
          type: 'error',
          message: '该科技成果详情不存在',
        })
        setTimeout(() => {
          this.$router.replace({ path: '/techSource/techAchievements' })
        }, 1000)
        return
      }
      this.nowId = id
      this.listLoading = true
      getAchievementsDetail({ id })
        .then((res) => {
          if (res.code == 200) {
            this.detailInfo = res.data
          }
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    toDetail(id) {
      if (id == this.nowId) {
        return
      }
      let toPath = '/techSource/techAchievements/techAchievementDetail/' + id
      this.$router.replace({ path: toPath })
    },
    getRecommendList() {
      getAchievementsReList().then((res) => {
        if (res.code === 200) {
          let list = res.rows
          this.recommendList = list.slice(0, 5)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.main-content {
  @apply flex py-8;
}
.font-18 {
  font-size: 18px !important;
}
</style>
